<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本信息</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
        .line{
            width: 1502px;
            margin-left: 71px;
            height: 7px;
            background-color: #F58220;
        }
        .title{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .title-item{
            background-color: #FFB87C;
            color: #FFFFFF;
            font-size: 20px;
            padding: 9px 34px;
            border-radius: 20px;
            margin: -27px 50px 0 50px;
        }
        .title-selected{
            background-color: #F58220;
        }
        .form-info{
            width: 1502px;
            margin-left: 71px;
            display: flex;
            flex-direction: row;
            /* justify-content: space-between; */
            align-items: center;
            flex-wrap: wrap;
            margin-top: 21px;
        }
        .form-item{
            width: 317px;
            font-size: 22px;
            color: #F58220;
            margin-top: 42px;
            margin-right: 78px;
        }
        .form-must{
            display: flex;
            flex-direction: row;
        }
        .form-item-end{
            margin-right: 0px;
        }
        .form-input{
            width: 100%;
            border-top: #F58220 0px solid ;
            border-right: #F58220 0px solid ;
            border-bottom: #F58220 1px solid ;
            border-left: #070706 0px solid ;
            color: #000000;
            padding: 0px 0 8px 0;
            font-size: 20px;
            margin-top: 20px;
            outline: 0;
        }
        .famliy{
            font-size: 22px;
            color: #F58220;
            margin-top: 48px;
            margin-left: 77px;
        }
        .famliy-status{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: 77px;
            margin-top: 28px;
        }
        .status-item{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 22px;
            color: #B7B7B7;
            margin-right: 78px;
        }
        .status-bgd{
            width: 74px;
            height: 74px;
            background-color: #B7B7B7;
            border-radius: 74px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .status-selected{
            color: #F58220;
        }
        .status-bgd-selected{
            background-color: #F58220;
        }
        .next-button{
            width: 121px;
            height: 37px;
            font-size: 20px;
            text-align: center;
            color: #FFFFFF;
            margin-top: 35px; 
            background-color: #F58220;
            border-radius: 20px;
            line-height: 37px;
            margin-left: 758px;
        }
    </style>
</head>
<body>
    <div class="heard">
        <img src="img/woniu_logo@2x.png" style="width: 307px;height: 68px;margin-left: 8px;margin-top: 63px;">
        <div class="right-top">
            <div class="heard-item">
                <img src="img/woniu_self@2x.png" style="width: 37px;height: 37px;margin-bottom: 14px;">
                <div>个人主页</div>
            </div>
            <div class="heard-item" onclick="showNavigation()">
                <img src="img/woniu_caidan@2x.png" style="width: 31px;height: 37px;margin-bottom: 14px;">
                <div>功能导航</div>
            </div>
        </div>
    </div>
    <div class="content">
        <div style="height: 61px;"></div>
        <div class="line"></div>
        <div class="title">
            <div class="title-item title-selected">完善基本信息</div>
            <div class="title-item">家庭习惯调研</div>
            <div class="title-item">新居期望调研</div>
        </div>
        <div class="form-info">
            <div class="form-item">
                <div class="form-must">
                    <div>小区名称/楼栋号</div>
                    <img src="img/stare@2x.png" style="width: 9px;height: 9px;margin-left: 8px;margin-top: 4px;">
                </div>
                <input type="text" class="form-input" placeholder="欧洲新城小区1栋1号">
            </div>
            <div class="form-item">
                <div>业主姓名:</div>
                <input type="text" class="form-input" placeholder="肖富强">
            </div>
            <div class="form-item">
                <div>省市区信息：</div>
                <input type="text" class="form-input" placeholder="四川省遂宁市船山区">
            </div>
            <div class="form-item form-item-end">
                <div>房屋面积：</div>
                <input type="text" class="form-input" placeholder="120㎡">
            </div>
            <div class="form-item">
                <div>房屋户型：</div>
                <input type="text" class="form-input" placeholder="两室一厅一卫">
            </div>
            <div class="form-item">
                <div>房屋状态：</div>
                <input type="text" class="form-input" placeholder="毛坯房">
            </div>
            <div class="form-item">
                <div>房屋类型:</div>
                <input type="text" class="form-input" placeholder="现房">
            </div>
            <div class="form-item form-item-end">
                <div>预计入驻时间：</div>
                <input type="text" class="form-input" placeholder="2021年09月（当前月份后推3月）">
            </div>
            <div class="form-item">
                <div>整装预算：</div>
                <input type="text" class="form-input" placeholder="两室一厅一卫">
            </div>
            <div class="form-item">
                <div>采光情况：</div>
                <input type="text" class="form-input" placeholder="良好">
            </div>
            <div class="form-item">
                <div>是否进行户型改造：</div>
                <input type="text" class="form-input" placeholder="是">
            </div>
        </div>
        <div class="famliy">家庭状态：</div>
        <div class="famliy-status">
            <div class="status-item status-selected">
                <div class="status-bgd status-bgd-selected">
                    <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                </div>
                <div style="margin-top: 18px;">单身白领</div>
            </div>
            <div class="status-item">
                <div class="status-bgd">
                    <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                </div>
                <div style="margin-top: 18px;">城市精英</div>
            </div>
            <div class="status-item">
                <div class="status-bgd">
                    <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                </div>
                <div style="margin-top: 18px;">二人世界</div>
            </div>
            <div class="status-item">
                <div class="status-bgd">
                    <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                </div>
                <div style="margin-top: 18px;">初婴家庭</div>
            </div>
            <div class="status-item status-selected">
                <div class="status-bgd status-bgd-selected">
                    <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                </div>
                <div style="margin-top: 18px;">双宝家庭</div>
            </div>
            <div class="status-item">
                <div class="status-bgd">
                    <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                </div>
                <div style="margin-top: 18px;">学业有成</div>
            </div>
            <div class="status-item">
                <div class="status-bgd">
                    <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                </div>
                <div style="margin-top: 18px;">纯老康养</div>
            </div>
            <div class="status-item">
                <div class="status-bgd">
                    <img src="img/test.png" style="max-width: 50px;max-height: 50px;">
                </div>
                <div style="margin-top: 18px;">三世同堂</div>
            </div>
        </div>
        <div style="width: 100%;text-align: center;font-size: 18px;color: #B7B7B7;margin-top: 35px;">- 问题选项全部加载完成 -</div>
        <div class="next-button" style="">下一步</div>
    </div>
    <div class="navigation" id="navigation">
        <div class="navigation-top"></div>
        <div class="navigation-content">
            <div class="navigation-item">
                <img src="img/baogao@2x.png" style="width: 23px;height: 25px;margin-right: 35px;">
                <div>调研报告</div>
            </div>
            <div class="navigation-heng"></div>
            <div class="navigation-item">
                <img src="img/tuichu@2x.png" style="width: 23px;height: 25px;margin-right: 35px;">
                <div>退出登录</div>
            </div>
        </div>
    </div>
    <div class="foot">Copyright © 2021 All rights reserved.蜗牛渼家 用户需求调研与分析系统</div>
</body>
<script>
    let navigationShow = true
    function showNavigation() {
        if (navigationShow == true) {
            document.getElementById("navigation").style.display = "block";
            navigationShow = false
        } else {
            document.getElementById("navigation").style.display = "none";
            navigationShow = true
        }
    }
</script>
</html>